<template>
  <div class="header">
    <!-- logo -->
    <div class="logo-box">
      <router-link to="/">
        互动学习社交平台
      </router-link>
    </div>

    <!-- 导航栏模块 -->
    <m-nav v-if="header.nav" :list="header.nav" />

    <!-- 登录模块 -->
    <login-area />
  </div>
</template>
<script>
import MNav from './header-nav.vue'
import LoginArea from './header-login.vue'
export default {
  data () {
    return {
      header: {} // 头部数据
    }
  },
  mounted () {
    this.getHeaderData()
  },
  methods: {
    // 获取头部数据
    getHeaderData () {
      this.header = {
        "logo": "https://www.imooc.com/static/img/index/logo.png",
        "nav": [
          {
            "title": "基础课程",
            "path": "/course",
            "icon": ""
          },
          {
            "title": "实战课程",
            "path": "/lesson",
            "icon": ""
          },
          {
            "title": "精品文章",
            "path": "/read",
            "icon": "https://www.imooc.com/static/img/common/new.png"
          }
        ]
      }
    }
  },
  components: {
    MNav,
    LoginArea
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .header
    z-index: 99;
    position: relative;
    padding-right: 10px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 4px 8px $shadow;
    .logo-box
      float: left;
      font-size: 21px;
      padding: 25px;
      height: 100%;
</style>
